import {
  ReactFlow,
  Background,
  useNodesState,
  useEdgesState,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";

/**
 * 通过三种方式设计 React Flow 的基本外观
 *  1 style通过props传递内联样式
 *  2 使用自定义 CSS 覆盖内置类
 *  3 覆盖 React Flow 使用的 CSS 变量
 *  4 第三方解决方案
 * @returns
 */

export default function Flow() {
  const [nodes] = useNodesState([
    {
      id: "node-1",
      position: { x: 100, y: 100 },
      data: { label: "node 1" },
    },
    {
      id: "node-2",
      position: { x: 100, y: 200 },
      data: { label: "node 2" },
    },
  ]);
  const [edges, , onEdgesChange] = useEdgesState([
    {
      id: "edge-0",
      source: "node-1",
      target: "node-2",
    },
  ]);
  // 1
  const styles = {
    // background: "red",
    width: 300, // 不起作用
    height: 300, // 不起作用
  };
  return (
    <ReactFlow
      colorMode="dark"
      nodes={nodes}
      edges={edges}
      onEdgesChange={onEdgesChange}
      style={styles}
    >
      <Background />
    </ReactFlow>
  );
}
